<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>四、其他常用的第三方库 | vue-admin-doc</title>
    <meta name="description" content="vue element admin">
    <link rel="icon" href="/vue-admin/doc/logo.png">
    
    <link rel="preload" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css" as="style"><link rel="preload" href="/vue-admin/doc/assets/js/app.d64942cb.js" as="script"><link rel="preload" href="/vue-admin/doc/assets/js/8.601e5cd3.js" as="script"><link rel="prefetch" href="/vue-admin/doc/assets/js/2.abdc0c9d.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/3.1009c37b.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/4.7d50b7a1.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/5.e95473fb.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/6.1efa8625.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/7.4fef4205.js"><link rel="prefetch" href="/vue-admin/doc/assets/js/9.2982823f.js">
    <link rel="stylesheet" href="/vue-admin/doc/assets/css/0.styles.2d99cce7.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/vue-admin/doc/" class="home-link router-link-active"><!----> <span class="site-name">vue-admin-doc</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/vue-admin/doc/guide/" class="nav-link router-link-active">指南</a></div><div class="nav-item"><a href="https://wangbin3162.github.io/docs/bin-ui/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  bin-ui
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://wangbin3162.gitee.io/vue-admin/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  预览
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/bin-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  2.0版本
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div><div class="nav-item"><a href="https://github.com/wangbin3162/vue-admin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav>  <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading open"><span>指南</span> <!----></p> <ul class="sidebar-group-items"><li><a href="/vue-admin/doc/guide/" class="sidebar-link">介绍</a></li><li><a href="/vue-admin/doc/guide/base.html" class="sidebar-link">一、基本准备</a></li><li><a href="/vue-admin/doc/guide/start.html" class="sidebar-link">二、开始实现</a></li><li><a href="/vue-admin/doc/guide/component.html" class="sidebar-link">三、组件解析</a></li><li><a href="/vue-admin/doc/guide/third.html" class="active sidebar-link">四、第三方库</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#stylus" class="sidebar-link">stylus</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#babel套件" class="sidebar-link">babel套件</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#fastclick" class="sidebar-link">fastclick</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#vue-lazyload图片懒加载" class="sidebar-link">vue-lazyload图片懒加载</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#better-scroll" class="sidebar-link">better-scroll</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#jsonp" class="sidebar-link">jsonp</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#create-keyframe-animation" class="sidebar-link">create-keyframe-animation</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#base64-js解码" class="sidebar-link">base64.js解码</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#lyric-parser" class="sidebar-link">lyric-parser</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#storage" class="sidebar-link">storage</a></li><li class="sidebar-sub-header"><a href="/vue-admin/doc/guide/third.html#vconsole" class="sidebar-link">vconsole</a></li></ul></li></ul></div></li></ul> </div> <div class="page"> <div class="content"><h1 id="四、其他常用的第三方库"><a href="#四、其他常用的第三方库" aria-hidden="true" class="header-anchor">#</a> 四、其他常用的第三方库</h1> <h2 id="stylus"><a href="#stylus" aria-hidden="true" class="header-anchor">#</a> stylus</h2> <blockquote><p>npm install stylus stylus-loader --save-dev</p></blockquote> <blockquote><p>npm install node-sass sass-loader --save-dev</p></blockquote> <h2 id="babel套件"><a href="#babel套件" aria-hidden="true" class="header-anchor">#</a> babel套件</h2> <p>babel-runtime(es6语法转义)  babel-polyfill(es6-api转义)</p> <blockquote><p>npm install babel-runtime --save</p></blockquote> <blockquote><p>npm install babel-polyfill --save-dev</p></blockquote> <h2 id="fastclick"><a href="#fastclick" aria-hidden="true" class="header-anchor">#</a> fastclick</h2> <p>移动端点击300毫秒延迟</p> <blockquote><p>npm install fastclick --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 用法:</span>
    <span class="token keyword">import</span> fastclick <span class="token keyword">from</span> <span class="token string">'fastclick'</span><span class="token punctuation">;</span>
    fastclick<span class="token punctuation">.</span><span class="token function">attach</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span>body<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h2 id="vue-lazyload图片懒加载"><a href="#vue-lazyload图片懒加载" aria-hidden="true" class="header-anchor">#</a> vue-lazyload图片懒加载</h2> <blockquote><p>npm install vue-lazyload --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// 用法</span>
<span class="token comment">// -main.js</span>
    <span class="token keyword">import</span> VueLazyload <span class="token keyword">from</span> <span class="token string">'vue-lazyload'</span><span class="token punctuation">;</span>
    Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>VueLazyload<span class="token punctuation">,</span> <span class="token punctuation">{</span>
        loading<span class="token punctuation">:</span> <span class="token string">'/static/loading/loading-bars.svg'</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><div class="language-html line-numbers-mode"><pre class="language-html"><code>    <span class="token comment">&lt;!-- -vue组建中--&gt;</span>
    <span class="token comment">&lt;!--在引入图片的位置使用v-lazy指令替代原有指令如--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span><span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>替换为<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">v-lazy</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span><span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>注:loading为载入时图片地址,可用svg,gif,png等</p> <h2 id="better-scroll"><a href="#better-scroll" aria-hidden="true" class="header-anchor">#</a> better-scroll</h2> <p>开发滚动</p> <blockquote><p>npm install better-scroll --save</p></blockquote> <p><a href="http://ustbhuangyi.github.io/better-scroll/doc/zh-hans" target="_blank" rel="noopener noreferrer">文档参考<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span>scroll <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BScroll</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>wrapper<span class="token punctuation">,</span> <span class="token punctuation">{</span>
    click<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 可以点击</span>
    probeType<span class="token punctuation">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token comment">// 检测时时滚动的位置</span>
    scrollX<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">// 是否可以横向滚动</span>
    eventPassthrough<span class="token punctuation">:</span> <span class="token string">'vertical'</span><span class="token comment">// 保留竖向滚动</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>scroll<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'scroll'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">pos</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token comment">//监听滚动事件</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>scrollY <span class="token operator">=</span> Math<span class="token punctuation">.</span><span class="token function">abs</span><span class="token punctuation">(</span>Math<span class="token punctuation">.</span><span class="token function">round</span><span class="token punctuation">(</span>pos<span class="token punctuation">.</span>y<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">// 将y值转换成正 整数</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>scroll<span class="token punctuation">.</span><span class="token function">refresh</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//用于刷新滚动</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>scroll<span class="token punctuation">.</span><span class="token function">scrollToElement</span><span class="token punctuation">(</span>el<span class="token punctuation">,</span> <span class="token number">300</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//滚动到指定element位置,参数为滚动时间</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="jsonp"><a href="#jsonp" aria-hidden="true" class="header-anchor">#</a> jsonp</h2> <blockquote><p>npm install jsonp --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> originJsonp <span class="token keyword">from</span> <span class="token string">'jsonp'</span><span class="token punctuation">;</span> 
<span class="token function">originJsonp</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> opts<span class="token punctuation">,</span> fn<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="create-keyframe-animation"><a href="#create-keyframe-animation" aria-hidden="true" class="header-anchor">#</a> create-keyframe-animation</h2> <p>第三方js生成css3动画</p> <blockquote><p>npm install create-keyframe-animation --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> animations <span class="token keyword">from</span> <span class="token string">'create-keyframe-animation'</span><span class="token punctuation">;</span>
<span class="token comment">// 可在transition 钩子函数中执行</span>
<span class="token keyword">let</span> animation <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token number">0</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>css<span class="token operator">...</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token number">100</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>css<span class="token operator">...</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
animations<span class="token punctuation">.</span><span class="token function">registerAnimation</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    name<span class="token punctuation">:</span> <span class="token string">'move'</span><span class="token punctuation">,</span>
    animation<span class="token punctuation">,</span>
    presets<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        duration<span class="token punctuation">:</span> <span class="token number">400</span><span class="token punctuation">,</span>
        easing<span class="token punctuation">:</span> <span class="token string">'linear'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
animations<span class="token punctuation">.</span><span class="token function">runAnimation</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$refs<span class="token punctuation">.</span>cdWrapper<span class="token punctuation">,</span> <span class="token string">'move'</span><span class="token punctuation">,</span> done<span class="token punctuation">)</span><span class="token punctuation">;</span>

animations<span class="token punctuation">.</span><span class="token function">unregisterAnimation</span><span class="token punctuation">(</span><span class="token string">'move'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span class="token comment">//注销动画</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br></div></div><h2 id="base64-js解码"><a href="#base64-js解码" aria-hidden="true" class="header-anchor">#</a> base64.js解码</h2> <blockquote><p>npm install js-base64 --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> Base64 <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'js-base64'</span><span class="token punctuation">;</span>

Base64<span class="token punctuation">.</span><span class="token function">encode</span><span class="token punctuation">(</span><span class="token string">'dankogai'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// ZGFua29nYWk=</span>
Base64<span class="token punctuation">.</span><span class="token function">encode</span><span class="token punctuation">(</span><span class="token string">'小飼弾'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>    <span class="token comment">// 5bCP6aO85by+</span>
Base64<span class="token punctuation">.</span><span class="token function">encodeURI</span><span class="token punctuation">(</span><span class="token string">'小飼弾'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 5bCP6aO85by-</span>

Base64<span class="token punctuation">.</span><span class="token function">decode</span><span class="token punctuation">(</span><span class="token string">'ZGFua29nYWk='</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// dankogai</span>
Base64<span class="token punctuation">.</span><span class="token function">decode</span><span class="token punctuation">(</span><span class="token string">'5bCP6aO85by+'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 小飼弾</span>
Base64<span class="token punctuation">.</span><span class="token function">decode</span><span class="token punctuation">(</span><span class="token string">'5bCP6aO85by-'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  <span class="token comment">// 小飼弾</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div><h2 id="lyric-parser"><a href="#lyric-parser" aria-hidden="true" class="header-anchor">#</a> lyric-parser</h2> <p>歌词封装组件</p> <blockquote><p>npm install lyric-parser --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code> <span class="token keyword">import</span> Lyric <span class="token keyword">from</span> <span class="token string">'lyric-parser'</span>
 <span class="token keyword">let</span> lyric <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Lyric</span><span class="token punctuation">(</span>lyricStr<span class="token punctuation">,</span> handler<span class="token punctuation">)</span>

 <span class="token keyword">function</span> <span class="token function">hanlder</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>lineNum<span class="token punctuation">,</span> txt<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
   <span class="token comment">// this hanlder called when lineNum change</span>
 <span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="storage"><a href="#storage" aria-hidden="true" class="header-anchor">#</a> storage</h2> <p>本地存储库</p> <blockquote><p>npm install good-storage --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> storage <span class="token keyword">from</span> <span class="token string">'good-storage'</span>
 
 <span class="token comment">// localStorage</span>
 storage<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span>val<span class="token punctuation">)</span> 
 
 storage<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> def<span class="token punctuation">)</span>
 
 <span class="token comment">// sessionStorage</span>
 storage<span class="token punctuation">.</span>session<span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span>
 
 storage<span class="token punctuation">.</span>session<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> val<span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br></div></div><h2 id="vconsole"><a href="#vconsole" aria-hidden="true" class="header-anchor">#</a> vconsole</h2> <p>腾讯移动端调试插件</p> <blockquote><p>npm install vconsole --save</p></blockquote> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> VConsole <span class="token keyword">from</span> <span class="token string">'vconsole/dist/vconsole.min'</span><span class="token punctuation">;</span>
<span class="token comment">/* eslint-disable no-unused-vars */</span>
<span class="token keyword">var</span> vConsole <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VConsole</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div></div> <div class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated: </span> <span class="time">2/11/2019, 5:56:38 PM</span></div></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/vue-admin/doc/guide/component.html" class="prev">
          三、组件解析
        </a></span> <!----></p></div> </div> <!----></div></div>
    <script src="/vue-admin/doc/assets/js/app.d64942cb.js" defer></script><script src="/vue-admin/doc/assets/js/8.601e5cd3.js" defer></script>
  </body>
</html>
